<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>我的账单</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<style type="text/css">
		html,body{background: #fff;}
		/*移动端1px下边线*/
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #bdbcbc; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		#headBox{height:1.57rem;position: fixed;width: 100%;top: 0;left: 0;z-index: 2;}
		.order_head_bottom{background: #00a9ee;color: #fff;height: 1.57rem;}
		.order_head_bottom img{height: 0.26rem;width: auto;display: block;margin: 0 auto;}
		.order_row{height: 1.2rem;text-align: center;}
		.order_row_left{height: 0.8rem;width: 49.8%;}
		.order_row_right{height: 0.8rem;width: 50.2%;border-left: 1px solid #1eb3f0;}
		.order_list{font-size: 0.3rem;background: #fff;}
		.order_item_c{padding-left: 0.3rem;}
		.order_item{padding: 0 0.3rem 0 0;height: 1.3rem;}
		.imgbox{height: 0.8rem;width: auto;margin-right: 0.3rem;}
		.imgbox img{height: 0.4rem;width: auto;}
		.tips{margin-right: 0.1rem;text-align: center;}
		.tips-t{color: #858585;font-size: 0.26rem;margin-top: 3px;}
		.money-stat-succ{font-size: 0.36rem;line-height: 0.36rem;color: #01a93c;}
		.img-fail{-webkit-filter: grayscale(95%); -moz-filter: grayscale(95%); -ms-filter: grayscale(95%);-o-filter: grayscale(95%);filter: grayscale(95%);filter: gray;}
		.text-fail{color:#858585;}
		.fail{color: #858585;text-decoration: line-through;}
		.zanwulogo{height: 3rem;width: 3rem;font-size: 0.28rem;margin: 2rem auto;text-align: center;color:#999;}
		.zanwulogo img{height: 2.2rem;width: 3rem;margin-bottom: 0.2rem;}
	</style>
	<body>
		<div id="headBox"></div>
		<div style="height: 1.97rem;background: #f4f5f5;"></div>
		<div id="orderList"></div>
		<script type="text/html" id="headbox_template">
		<div class="order_head_bottom">
			<img src=""/>
			<div class="order_row flex flex-align-center">
					<div class="order_row_left">
						<p style="font-size: 0.4rem;margin-top: -7px;"><%= data.totalAmt %></p>
						<p style="font-size: 0.28rem;">交易金额(元)</p>
					</div>
					<div class="order_row_right">
						<p style="font-size: 0.4rem;margin-top: -7px;"><%= data.totalCount %></p>
						<p style="font-size: 0.28rem;">交易笔数(笔)</p>
					</div>
			</div>
		</div>
		</script>
		<script type="text/html" id="template_orderList">
			<div class="order_list">
				<!--账单分组-->
				<%for(var i=0;i<data.length;i++){%>
				<div class="order_itemBox">
					<div class="order_item_c">
						<%for(var j=0;j<data[i].records.length;j++){%>
						<div class="order_item flex flex-align-center border" data-id="<%= data[i].records[j].id %>" onclick="order.orderJump(this)">
							<div class="imgbox flex flex-align-center">
								<img class="<%if(data[i].records[j].payStatusCode ==1 || data[i].records[j].payStatusCode ==6 || data[i].records[j].payStatusCode ==0){%> img-fail <%}%>" src="<%= data[i].records[j].payModeIcon %>"/>
							</div>
							<div class="flex-1">
								<p class="<%if(data[i].records[j].payStatusCode ==1 || data[i].records[j].payStatusCode ==6 || data[i].records[j].payStatusCode ==0){%> text-fail <%}%>"><%= data[i].records[j].tradeTypeName %></p>
								<p class="tips-t"><%= data[i].records[j].createTime %> <%= data[i].records[j].channelName %></p>
							</div>
							<div class="tips">
								<p class="money-stat-succ <%if(data[i].records[j].payStatusCode ==1 || data[i].records[j].payStatusCode ==6 || data[i].records[j].payStatusCode ==0){%> fail <%}%>"><%= data[i].records[j].orderAmount %>元</p>
								<p class="tips-t"><%= data[i].records[j].payStatusName %></p>
							</div>
						</div>
						<%}%>
					</div>
				</div><!--单个账单分组结束-->
				<%}%>
			</div>
		</script>
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/jquery.base64.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/iscroll.js"></script>
	<script type="text/javascript" src="js/screenDetails.js"></script>
</html>
